<template>
  <n-form
    class="max-w-[600px]"
    ref="formRef"
    :model="form"
    :rules="rules"
    label-placement="left"
    :label-width="80"
  >
    <n-form-item label="旧密码" path="oldPassword">
      <n-input
        v-model:value="form.oldPassword"
        type="password"
        placeholder="请输入旧密码"
        show-password-on="click"
      />
    </n-form-item>

    <n-form-item label="新密码" path="newPassword">
      <n-input
        v-model:value="form.newPassword"
        type="password"
        placeholder="请输入新密码"
        show-password-on="click"
      />
    </n-form-item>

    <n-form-item label="确认密码" path="confirmPassword">
      <n-input
        v-model:value="form.confirmPassword"
        type="password"
        placeholder="请输入确认密码"
        show-password-on="click"
      />
    </n-form-item>

    <n-form-item label=" ">
      <n-button type="primary" @click="submitForm">修改密码</n-button>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
import { updateProfilePwd } from '@/apis/system/user';
import { useForm } from '@/hooks/useForm';
import { useMessage } from 'naive-ui';

const message = useMessage();
const { form, validate } = useForm({
  oldPassword: null,
  newPassword: null,
  confirmPassword: null,
});

const rules = {
  oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '新密码不能为空', trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
  ],
  confirmPassword: [
    // { required: true, message: '确认密码不能为空', trigger: 'blur' },
    {
      required: true,
      validator: () => {
        return form.newPassword === form.confirmPassword;
      },
      message: '两次输入的密码不一致',
      trigger: 'blur',
    },
  ],
};

const submitForm = async () => {
  const errors = await validate();
  if (errors) return;

  try {
    const res: any = await updateProfilePwd(form);
    if (res.code === 200) {
      message.success('更新成功');
    }
  } catch (error) {}
};
</script>

<style lang="less" scoped></style>
